<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>系统字典列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/user.css" media="all" />
    <link rel="stylesheet" href="/css/search.css" media="all" />
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1041315_7utpmi3q5g4.css">
    <style>
        .detail-body{
            margin: 20px 0 0;
            color: #333;
            word-wrap: break-word;
        }
    </style>
</head>
<body class="childrenBody">
<fieldset class="layui-elem-field">
    <legend>系统字典检索</legend>
    <div class="layui-field-box">
    <form class="layui-form toolbar">
        <select id="table-search-key" name="s_type">
            <option value=""></option>
            <option th:each="type:${types}" th:value="${type}" th:text="${type}" placeholder="请选择类型"></option>
        </select>&emsp;
        <div class="layui-inline">
            <a class="layui-btn" lay-submit="" lay-filter="searchForm"><i class="iconfont icon-sousuo2"></i>查询</a>
        </div>
        <div class="layui-inline" >
            <button type="reset" class="layui-btn layui-btn-primary"><i class="iconfont icon-zhongzhi"></i>重置</button>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-normal addDict"><i class="iconfont icon-xinzeng"></i>添加字典</a>
        </div>
    </form>
    </div>
</fieldset>
<div class="layui-form users_list">
    <table class="layui-table" id="test" lay-filter="demo"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="iconfont icon-xiugai"></i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="iconfont icon-shanchu"></i>删除</a>
    </script>
</div>
<div id="page" style="text-align: center;"></div>

<div id="changeTypeDiv" style="display: none" class="detail-body">
    <form  id="changeTypeForm" class="layui-form" style="width: 500px">
        <div class="layui-form-item">
            <label class="layui-form-label">原TYPE值</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input layui-disabled" name="oldType" disabled lay-verify="required" placeholder="请输入原TYPE值">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新TYPE值</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="newType" lay-verify="required" placeholder="请输入新TYPE值">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="changeType"><i class="iconfont icon-fabu"></i>立即提交</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/tools.js"></script>
<script type="text/javascript"  th:inline="none">
    layui.config({
        base: '/js/common/' //假设这是你存放拓展模块的根目录
    }).use(['layer','form','table','laypage','common'], function() {
        var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                table = layui.table,
            laypage=layui.laypage,
            common=layui.common,
                t,changeIndex;                  //表格数据变量

        t = {
            elem: '#test',
            url:'list',
            method:'post',
            id:'testReload',
            page:false,
            width: $(parent.window).width()-223,
            cols: [[
                {type:'checkbox'},
                {field:'type',      title: '类型'},
                {field:'label',     title: '标签'},
                {field:'value',     title: '值'},
                {field:'description',    title: '描述'},
                {field:'createTime',  title: '创建时间',width:'15%',templet:'<div>{{ layui.laytpl.toDateString(d.createTime) }}</div>',unresize: true}, //单元格内容水平居中
                {fixed: 'right', title: '操作',   width: '30%', align: 'center',toolbar: '#barDemo'}
            ]],
            done: function(res, curr, count){
                //pages=res.page;
                counts=res.count;
                //完整功能
                laypage.render({
                    elem: 'page'
                    ,count: counts,
                    first: '首页',
                    last: '尾页'
                    ,layout: ['count', 'prev', 'page', 'next',  'refresh', 'skip']
                    ,theme: '#00A0E9'
                    ,curr: curr
                    ,skip: true
                    ,jump: function(obj,first){
                        curr = obj.curr;

                        if(!first){
                            getData(obj.curr,obj.limit)
                        }
                    }
                });

            }
        };
        table.render(t);
        function getData(page,limit){
            $.ajax({
                type: 'post',
                url: 'list?page='+page+"&limit="+limit,
                async: false,
                success: function (data) {
                    $(".layui-laypage-btn").click();
                    table.reload('testReload',{
                        data : data,
                        page:{
                            curr:page
                        }
                    });

                }
            });
        }
        //添加字典
        $(".addDict").click(function () {
            var url = "addUI";
            common.cmsLayOpen('添加字典', url, '600px', '500px');
        })
        //监听工具条
        table.on('tool(demo)', function(obj) {
            var data = obj.data;
            if(obj.event === 'edit'){
                var url = "editUI?id="+data.id;
                common.cmsLayOpen('修改字典', url,'600px', '500px');
            }
            if (obj.event === "del") {
                layer.confirm("你确定要删除该字典么？", {btn: ['是的,我确定', '我再想想']},
                    function () {
                        $.post("delete", {"id": data.id}, function (res) {
                            if (res.success) {
                                layer.msg("删除成功", {time: 1000}, function () {
                                    table.reload('testReload', t);
                                });
                            } else {
                                layer.msg(res.message);
                            }

                        });
                    }
                )
            }
        });
        //搜索
        form.on("submit(searchForm)",function(data){
            t.where = data.field;
            table.reload('testReload', t);
            return false;
        });
    });
</script>
</body>
</html>